<template>
	<div class="navWrap">
		<ul class="big_ul">
			<li v-for="(menuList, index1) in menuLists" :key="index1" class="big_li" @click="showLi()">
				{{menuList.t}}
				<ul class="small_ul hide">
					<li v-for="(h, index2) in menuList.h" :key="index2" class="small_li">{{ h }}</li>
				</ul>
				
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				menuLists: [
					{t:'首页',h:[]},
					{t:'文本工具',h:['1', '2', '3']},
					{t:'语言工具',h:['中文转繁体转换工具','成语查询工具', '在线翻译工具', '一句诗词', '励志句子', '毒鸡汤']},
					{t:'转换工具',h:['1', '2', '3']},
					{t:'日期时间',h:['1', '2', '3']},
					{t:'便民查询',h:['1', '2', '3']},
					{t:'开发工具',h:['1', '2', '3']},
					{t:'编码加密',h:['1', '2', '3']},
					{t:'站长工具',h:['1', '2', '3']},
				],
				// smallLists: []
			}
		},
		methods:{
			showLi(){
				// console.log(event.target.childNodes[1])
				event.target.childNodes[1].classList.toggle('hide')
			}
		}
	}
</script>

<style lang="scss">
	.navWrap{
		ul{
			list-style: none;
			text-align: center;
			padding: 0;
			color: #B8B8B8;
			.big_li{
				
				font-size: 16px;
				padding: 8px 0;
				&:hover{
					color: #4caf50;
				}
				.small_ul{
					// display: none;
					transition: all 1s;
					.small_li{
						font-size: 14px;
						padding: 6px 0;
						&:hover{
							color: #4caf50;
						}
					}
				}
			}
			
		}
	}
	.hide{
		display: none;
	}
</style>
